<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>管理系统</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            font-family: Arial;
        }

        body {
            background-color: #F9F9F9;
        }

        .login_header_wrap {
            height: 60px;
            border-bottom: 1px solid #E2E2E2;
            background-color: white;
            padding-top: 40px;
        }

        .login_header {
            min-width: 768px;
            max-width: 1024px;
            margin: 0 auto;
        }

        .login_header > h2 > span {
            float: left;
        }

        .brandTxt {
            font-size: 16px;
            font-weight: bold;
            border-left: 1px solid #BBBBBB;
            color: #BBBBBB;
            margin: 17px 0 0 10px;
            padding: 1px 0 2px 10px;
        }

        .headlogo {
            width: 185px;
            height: 47px;
            background-image: url(${base}/resources/admin/images/login/login_logo.png);
            background-size: 185px;
            background-repeat: no-repeat;
            background-position: 0;
        }

        .login_foot_wrap {
            height: 100px;
            width: 100%;
            background-color: white;
            border-top: 1px solid #E2E2E2;
            position: absolute;
            bottom: 0;
        }

        .login_foot {
            min-width: 768px;
            max-width: 1024px;
            margin: 0 auto;
        }

        .login_foot > span {
            height: 40px;
            display: block;
            line-height: 40px;
            color: #666;
            font-size: 12px;
            margin-top: 20px;
            margin-left: 20px;
        }

        .login_title {
            font-size: 15px;
            color: #333;
            font-weight: bold;
            padding-left: 50px;
            background-image: url(${base}/resources/admin/images/login/system.png);
            background-repeat: no-repeat;
            background-size: 40px;
            background-position: left -4px;
        }

        .login_content_wrap {
            width: 768px;
            height: 364px;
            position: absolute;
            top: 48%;
            left: 50%;
            margin: -200px 0 0 -400px;
            z-index: 100;
        }

        .login_content_left {
            float: left;
            width: 365px;
            height: 284px;
            padding-top: 20px;
            margin-top: 60px;
        }

        .login_content_right {
            float: right;
            width: 346px;
            padding: 5px;
            background-color: #ebebeb;
            margin-top: 60px;
        }

        .login_content {
            background-color: white;
        }

        .login_content_title {
            height: 42px;
            width: 172px;
            line-height: 42px;
            font-size: 14px;
            font-weight: bold;
            text-align: center;
        }

        .login_content_form {
            padding: 22px 15px 15px 15px;
        }

        .login_input {
            width: 300px;
            height: 31px;
            line-height: 31px;
            font-size: 14px;
            color: #777;
            border: 1px solid #d0d0d0;
            background-image: url(${base}/resources/admin/images/login/inputicons.png);
            background-position: left -203px;
            background-repeat: repeat-x;
            padding: 3px 6px;
            margin: 2px 0 20px 0;
            outline: none;
        }

        .validate_code{
            width:150px;
        }

        .login_input:hover {
            border: 1px solid #9D9D9D;
        }

        .login_Btn {
            width: 100%;
            height: 35px;
            color: #FFF;
            font-size: 15px;
            font-weight: bold;
            background-color: #19AA8D;
            cursor: pointer;
            border: 0;
            margin-bottom: 10px;
            margin-top: 10px;
        }

        div.login_content_form .captchaImage {
            margin-left: 10px;
            vertical-align: middle;
            cursor: pointer;
        }

        .login_notice {
            background-color: #3b3b3b;
            padding: 6px 10px;
            color: #FFF;
            margin-top: -20px;
            z-index: 200;
            position: absolute;
            font-size: 12px;
            display: none;
        }
    </style>
</head>
<body>
<div class="login_header_wrap">
    <div class="login_header">
        <h2>
            <span class="headlogo"></span>
            <span class="brandTxt">温州市民卡APP后台管理系统</span>
        </h2>
    </div>
</div>
<div class="login_content_wrap">
    <div class="login_content_left">
        <p class="login_title">本系统可以在IE8.0+、Firefox、Chrome浏览器中运行</p>
    </div>
    <div class="login_content_right">
        <div class="login_content">
            <div class="login_content_title">用户登录</div>
            <div class="login_content_form">
                <form method="post" id="inputForm" action="${base}/admin/authc/doLogin">
                    <p>
                        <input type="text" id="uname" name="username" class="login_input" placeholder="用户名"/>
                    </p>
                    <p>
                        <input type="password" name="password" id="pwd" placeholder="密码" class="login_input"/>
                    </p>
                    <input type="hidden" name="userType" value="supplier">
                    <p>
                        <input type="validateCode" name="validateCode" id="validateCode" placeholder="验证码" class="validate_code login_input "/>
                        <img id="captchaImage" class="captchaImage" src="${base}/admin/authc/validatecode" >
                    </p>
                    <p>
                        <input type="submit" value="登  录" hidefocus="true" id="loginBtn" class="login_Btn"/>
                    </p>
                    <p style="display: none;">
                        <input type="checkbox" id="rmUser" name="rememberMe" value="true" />记住用户
                    </p>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="login_foot_wrap">
    <div class="login_foot">
        <span>Copyright © 温州市民卡服务有限公司</span>
    </div>
</div>
</body>
<script type="text/javascript" src="${base}/resources/admin/js/jquery.js"></script>
<script type="text/javascript" src="${base}/resources/admin/layer/layer.js"></script>
<script>
    if (window.top !== window.self) {
        window.top.location = window.location;
    }

    $(function () {
        var $captchaImage = $("#captchaImage");
        var $pwd = $("#pwd");
        var $uname = $("#uname");
        var $rmUser = $("#rmUser");
        var $validateCode = $("#validateCode");

        [#if flashMessage ??]
        layer.msg("${flashMessage}");
        [/#if]

        $("body").keyup(function (e) {
            if (e.keyCode == 13) {
                $("#loginBtn").trigger('click');
            }
        });

        // 更换验证码
        $captchaImage.click( function() {
            $captchaImage.attr("src", "${base}/admin/authc/validatecode?timestamp=" + (new Date()).valueOf());
        });



        if (getCookie("rmUser") == 'on') {
            $uname.val(getCookie("uname"));
            $rmUser.attr("checked", "checked");
        }
        $("#loginBtn").click(function () {



            if ($uname.val() == '') {
                layer.msg("请输入用户名！");
                return false;
            }
            if ($pwd.val() == '') {
                layer.msg("请输入密码！");
                return false;
            }
            if ($validateCode.val() == ''){
                layer.msg("请输入验证码！");
                return false;
            }

            if ($rmUser.attr("checked") == 'checked') {
                setCookie('uname', $uname.val());
                setCookie('rmUser', 'on');
            } else {
                setCookie('rmUser', 'off');
                setCookie("uname", '');
            }
            $("#inputForm").submit();
        });


        function setCookie(name, value) {
            var Days = 30;
            var exp = new Date();
            exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
            document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
        }


        function getCookie(name) {
            var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
            if (arr = document.cookie.match(reg))
                return unescape(arr[2]);
            else
                return null;
        }

        function delCookie(name) {
            var exp = new Date();
            exp.setTime(exp.getTime() - 1);
            var cval = getCookie(name);
            if (cval != null) {
                document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();

            }
        }
    });
</script>

</html>